import React from "react";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import "./index.css";
import axios from "axios";
import { useState } from "react";

export default function HeroDetail() {
  //声明状态
  let [hero, setHero] = useState({});
  //模拟组件挂在完毕的钩子
  useEffect(() => {
    let id = 18;
    async function main() {
      //发送 AJAX 请求
      let {data} = await axios.get(`http://api.xiaohigh.com/heros/${id}`);
      //修改状态
      setHero(data);
    }
    main();
  }, [])

  return (
    <div className="container hero-detail">
      <div className="col-xs-3 base-info">
        <h3>{hero.name}</h3>
        <p>{hero.type}</p>

        <div className="row">
          {hero.skills && hero.skills.map((item, index) => {
            return <div className="col-xs-3" key={index}>
                      <img
                        width="100%"
                        src={`http://cdn.xiaohigh.com${item.img}`}
                        alt=""
                        className="img-responsive"
                      />
                      <h6>{item.name}</h6>
                    </div>
          })}
          
          
        </div>
      </div>

      <div className="col-xs-9">
        <img
          className="img-responsive"
          src={hero.big_image ? `http://cdn.xiaohigh.com${hero.big_image}` : ''}
          alt=""
        />
        <hr />
        <p dangerouslySetInnerHTML={{__html: hero.intro}}></p>
      </div>
    </div>
  );
}
